<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:p="http://primefaces.org/ui"
             xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:form id="frmTrocarSenha">
        <p:remoteCommand id="cmdChangePassword"
                         name="changePassword"
                         update="txtSenha, 
                         txtNovaSenha, 
                         txtConfirmarNovaSenha"
                         oncomplete="$('#modal-changePassword').modal('show'); return false;"/>

        <p:remoteCommand id="cmdSalvarSenha"
                         name="salvarSenha"
                         actionListener="#{trocarSenhaController.salvar()}"
                         oncomplete="$('#modal-changePassword').modal('hide'); return false;"/>

        <p:remoteCommand id="cmdCancelarSenha"
                         name="cancelarSenha"
                         oncomplete="$('#modal-changePassword').modal('hide'); return false;"/>

        <div id="modal-changePassword" class="modal hide fade">
            <div class="modal-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/password.png" />
                    <h3 id="modal-title">Trocar a Senha</h3>
                </h:panelGrid>
            </div>
            <div class="modal-body">
                <p class="center" id="modal-content">
                    <h:panelGrid columns="2" 
                                 cellpadding="5"
                                 cellspacing="5">
                        <h:outputLabel value="Digite a sua senha atual: "
                                       style="text-align: right;"/>
                        <p:outputPanel styleClass="input-prepend">
                            <span class="add-on"><i class="icon-asterisk"></i></span>
                            <h:inputSecret id="txtSenha"
                                           class="input-block-level"
                                           style="width: 250px;"
                                           value="#{trocarSenhaController.senha}" />
                        </p:outputPanel>
                        <h:outputLabel value="Digite a sua nova senha: "
                                       style="text-align: right;"/>
                        <p:outputPanel styleClass="input-prepend">
                            <span class="add-on"><i class="icon-asterisk"></i></span>
                            <p:password id="txtNovaSenha"
                                        inline="true"
                                        styleClass="input-block-level"
                                        value="#{trocarSenhaController.novaSenha}" 
                                        feedback="true"/>
                        </p:outputPanel>
                        <h:outputLabel value="Confirme a sua nova senha: "
                                       style="text-align: right;"/>
                        <p:outputPanel styleClass="input-prepend">
                            <span class="add-on"><i class="icon-asterisk"></i></span>
                            <p:password id="txtConfirmarNovaSenha"
                                        inline="true"
                                        styleClass="input-block-level"
                                        value="#{trocarSenhaController.confirmarNovaSenha}" 
                                        feedback="true"/>
                        </p:outputPanel>
                    </h:panelGrid>
                </p>
            </div>
            <div class="modal-footer">
                <button id="btnSalvarSenha"
                        type="button"
                        class="btn btn-primary"
                        onclick="salvarSenha();">
                    <i class="icon-ok icon-white"></i>
                    Salvar
                </button>

                <button id="btnCancelarSenha"
                        type="button"
                        class="btn"
                        onclick="cancelarSenha();">
                    <i class="icon-remove"></i>
                    Cancelar
                </button>
            </div>
        </div>
    </h:form>
</ui:fragment>